<template>
	<view class="bigView">
		<z-paging ref="paging" :show-default-loading-more-text="false" v-model="dataList" @query="queryList">
			<navBar slot="top" title="积分商城"></navBar>
			<u-grid
					:border="false"
					col="2"
			>
				<u-grid-item
					v-for="(item, index) in dataList" :key="index" @click="itemHandle(item)"
				>
					<view class="demo-layout bg-purple-light">
						<image :src="item.tbPlatformGoodsFileList[0].fileUrl" class="goodsImg"></image>
						<view class="containerItem">
							<text style="padding: 10px;">{{ item.platformGoodsName }}</text>
						</view>
						<view class="jifen">{{item.finalPrice}}积分</view>
					</view>
				</u-grid-item>
			</u-grid>
		</z-paging>
		
		<u-popup :show="show" @close="close" @open="open" mode="center" :round="10">
			<view class="popView">
				<view style="margin-top: 10px;margin-bottom: 10px;">确认兑换此商品</view>
				<image :src="currentItem.tbPlatformGoodsFileList[0].fileUrl" class="goodsImg2"></image>
				<view style="
				font-size: 14px;margin-top:15px;margin-bottom:15px;
				">
				<text style="padding: 15px;">{{currentItem.platformGoodsName}}</text>
				</view>
				<text style="font-size: 14px;color: #FF3022;margin-bottom: 10px;">兑换需要消耗积分：{{currentItem.finalPrice}}</text>
				<view class="bottomBtnView">
					<view :class="['bottomBtnSome']" @click="show=false">取消</view>
					<view :class="['bottomBtnSome']" @click="submitHandle" style="color: white;background-color: #247BFD;margin-left: 10px;">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import navBar from "@/components/nav_bar.vue"
	import goods from '@/api/goods.js'
	export default{
		components:{
			navBar
		},
		data(){
			return {
				show: false,
				dataList:[],
				currentItem:{},
				userInfo:{},
			}
		},
		mounted() {
			// this.listRequest()
			this.$nextTick(() =>{
				this.initUserInfo()
			})
		},
		methods:{
			initUserInfo(){
				const userInfo = uni.getStorageSync("userInfo")
				if(userInfo){
					this.userInfo = JSON.parse(userInfo)
				}
			},
			open() {
			  // console.log('open');
			},
			close() {
			  this.show = false
			  // console.log('close');
			},
			listRequest(){
				goods.listHandle({}).then(res =>{
					this.dataList = res.records;
					for(let i=0;i<this.dataList.length;i++){
						let dataList = [];
						dataList = JSON.parse(this.dataList[i].content)
						this.dataList[i]['list'] = dataList
					}
				}).catch(error =>{
					
				})
			},
			// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
			queryList(pageNo, pageSize) {
				
				goods.listHandle({page:pageNo,size:pageSize}).then(res =>{
					this.dataList = res.records;
					this.$refs.paging.complete(res.records);
				}).catch(error =>{
					this.$refs.paging.complete(false);
				})
			},
			itemHandle(item){
				this.currentItem = item;
				this.show = true;
			},
			submitHandle(){
				uni.showLoading({
					title:'正在兑换...'
				})
				goods.addHandle({
					"goodsId": this.currentItem.id,
					"ruleSettings": this.currentItem.finalPrice,
					"userId": this.userInfo.id
				}).then(res =>{
					uni.hideLoading()
					uni.showToast({
						title:'兑换成功'
					})
					this.show = false;
				}).catch(err =>{
					uni.hideLoading()
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.bigView{
	width: 100vw;
	height: 100vh;
	background-color: #F7F7F7;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}
.goodsItem{
	width: calc((100vw - 32px) / 2);
	height: calc((100vw - 32px) / 2);
	background-color: red;
}
.goodsImg{
	display: flex;
	
	width: 80%;//calc(50vw - 36px);
	padding: 10px 0;
	height: calc(50vw - 36px);
}
.goodsImg2{
	height: 50vw;
	width: 50vw;
}
.demo-layout {
        // height: 25px;
		width: 47vw;
        border-radius: 4px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 10px;
    }
	
.containerItem{
	width: 47vw;//calc(50vw - 36px);
	// padding-bottom: 10px;
	font-size: 14px;
	height: 40px;	
}
.container {
  display: flex;
  flex-wrap: wrap; /* 允许子元素换行 */
}

.popView{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: calc(100vw - 104px);
}

.bottomBtnView{
	margin-top: 24px;
	display: flex;
	flex-direction: row;
	margin-bottom: 24px;
	// background-color: red;
	// width:calc(100vw - 104px);
}

.bottomBtnSome{
	width: calc((100vw - 146px) / 2);
	height: 40px;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: black;
	border: 1px solid #D5D5D5;
	border-radius: 20px;
}
.bottomBtn{
	
}

.column-item {
  flex: 1 0 40%; /* 每个子元素占据50%的宽度 */
  box-sizing: border-box; /* 包括padding和border在width内 */
  // margin: 10px 10px 20px 0;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 10px;
  background-color: white;
  border-radius: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  // justify-content: center;
}
.jifen{
	font-size: 14px;
	color: red;
	width: 100%;
	padding-bottom: 10px;
	padding-left: 12px;
}

.item{
	width: calc(100vw - 32px);
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	background-color: white;
	margin-left: 16px;
	margin-top: 8px;
	.title{
		height: 54px;
		width: calc(100vw - 32px);
		display: flex;
		align-items: center;
		padding-left: 16px;
	}
	.line{
		height: 0.5px;
		background-color: #F7F7F7;
		width: calc(100vw - 32px);
	}
	.stepView{
		padding: 16px;
	}
	.slotIconText{
		width: 21px;
		height: 21px;
		background-color: #247BFD;//$u-warning;
		border-radius: 100px;
		font-size: 12px;
		color: #fff;
		line-height: 21px;
		text-align: center;
	}
}
.wrap {
        padding: 12px;
    }

    

    .bg-purple {
        background: #CED7E1;
    }

    .bg-purple-light {
        background: white;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }
</style>